import React, { FC, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NavigationProp, RouteProp, useFocusEffect } from '@react-navigation/native';
import { LinearGradient } from 'react-native-linear-gradient';
import StorageUtil from '../../utils/Storage.ts';

interface ISplashScreenProps {
  navigation: NavigationProp<any, 'splash'>;
  route: RouteProp<{ splash: any }, 'splash'>;
}

const SplashScreen: FC<ISplashScreenProps> = ({ navigation, route }) => {
  // 使用 useFocusEffect 监听页面出现事件
  useFocusEffect(
    React.useCallback(() => {
      setTimeout(async () => {
        const token = await StorageUtil.load<string>('token');
        const userInfo = await StorageUtil.load<ILoginResponse>('userInfo');
        if (token && userInfo) {
          navigation.navigate('tab');
        } else {
          navigation.navigate('login');
        }
      }, 1000);
    }, []),
  );

  return (
    <LinearGradient colors={['#2c95f1', '#3cd692', '#3fd68e']} style={styles.container}>
      <View style={styles.root}>
        <Text style={styles.title}>康来科技</Text>
        <Text style={styles.copyrightText}>康来生物科技有限公司版权所有</Text>
      </View>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  root: {
    width: '100%',
    height: '100%',
    flexDirection: 'column',
    alignItems: 'center',
  },

  icon_logo: {
    width: 300,
    height: 150,
    marginTop: 200,
    resizeMode: 'contain',
  },

  title: {
    marginTop: 200,
    fontSize: 40,
    fontWeight: 'bold',
    color: 'white',
  },
  copyrightText: {
    color: 'white',
    position: 'absolute',
    bottom: 30,
  },
});

export default SplashScreen;
